iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

前端藝術 - 用P5.js做藝術系列 第 3

Day 3 - cheatSheet 小技巧與本機環境設定

  • 分享至 

  • xImage
  •  

CheatSheet 小技巧

因為大家其實不太會被指令 所以在網路上有一個小小的P5 cheatsheet 小教學如果有需要可以隨時回來這邊去看自己有需要的東西

Dy9-5PWUcAEvI3s.jpeg

本地安裝

如果您有本地端的設定可以參考 因為教學都是用在網路編輯器,但我們其實還是需要在本機端才是最主要的需求

https://p5js.org/get-started/

他會直接提供主要大家可以直接在本機端如何直接設定的做法
建議也可以安裝 VSCODE 跟 liveserve 去把P5.js直接執行出來

也可以直接去下載他的CDN在html裡面放入P5.js

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>p5.js example</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
    </style>
    <script src="p5.js"></script>
    <!-- <script src="../addons/p5.sound.js"></script> -->
    <script src="sketch.js"></script>
  </head>

  <body>
    <main></main>
  </body>
</html>

sketch.js裡面只要放入 p5 的設定就可以跑執行看看了

function setup() {
  //slow down the frameRate to make it more visible
  createCanvas(1000, 1000);
  background(0, 0, 0);
}

function draw() {
  background(100, 10);
  fill(mouseX, mouseY, frameCount);
  if (mouseIsPressed) {
    fill(0);
    rect(mouseX, mouseY, 100, 100);
  } else {
    ellipse(mouseX, mouseY, 100, 100);
  }
}
// print(pmouseX +

寫CODE操作技巧

這邊主要給已經會寫code的朋友利用https://openprocessing.org/ 你可以在裡面操作的技巧 你就可以節省很多不必要的滑鼠刪除增加指令

速鍵(使用 Mac 的同學只要將 ctrl 代換成 ⌘ 即可)

  • Ctrl + F:關鍵字搜尋
  • Ctrl + D:多重選取關鍵字
  • Alt + 左右:往左 or 右移動一個單字
  • Alt + Delete / Backspace:往左 or 右刪除一個單字
  • Ctrl + 左右:移動到句首 or 句尾
  • Ctrl + Delete / Backspace:往左 or 右刪除一整行
  • Tab / Shift + Tab:增加 / 減少縮排
  • Ctrl + enter:執行 Code

上一篇
Day2 - P5基本操作 - 基本設定跟操作
下一篇
Day4 - 幾何抽象
系列文
前端藝術 - 用P5.js做藝術30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言